<!DOCTYPE html>
<html>
	<head>
		<title>
			Photo Strip start
		</title>
		<meta name="description" content="FotoFlow WordPress photo plugin creates an immersive full-screen photo experience for your viewers. " />
		<meta name="keywords" content="wordpress, photo plugin, FotoFlow, photo blog" />
		<?php include_once("DevinPhotoStyles.php"); ?>
		<!-- Fuck it: resizing an image very small cuts it off instead of resizing it. --> 
	</head>
	<body>
	
		<?php //load initial array ?>
		<?php $photos = array("full1.png", "full2.png", "full3.png", "full.png", "full.png", "full.png", "full.png", "full.png", "full.png", "full.png", "full3.png", )?>
	
		<div class="wholePage">
			<div class="strip">
				<?php 
					include_once("DevinPhotoHoverJS.php");
					$photoCounter = 0; 
					while( $photoCounter < 11 ) { 
						//mysql... ?  
						if ($photoCounter < 11) {
							$one = $photos[$photoCounter];;
						} else {
							$one = "full.png";
						}
					?>
						<div class="thumbnails" 
								                 id="<?php echo 'div'.$photoCounter; ?>"
								  onmouseover="full('<?php echo 'img'.$photoCounter; ?>')"
								    onmouseup="full('<?php echo 'img'.$photoCounter; ?>')">
							<img class="imgId" id="<?php echo 'img'.$photoCounter; ?>" src="<?php echo $one; ?>" /> 
							<!-- Thumbnail is hard coded, needs to be variable -->
						</div>
						
				<?php $photoCounter++; } ?>
			</div>
			<div class="content">
				<div class="innerContent" id="fullImg" style="background-image:url('clear.png');">
					
				</div>
			</div>
			
		</div>
		
	</body>
</html>